<template>
    <div class="app" style="position: relative; overflow-y: auto;">
        <div class="title" style="font-weight: bolder;font-size:17px;color:#6E757C;margin-left:20px;margin-top:30px">
            {{ sss }}的表白卡
            <a class="time" style="font-size: 12px;color:#9BA6AC;font-weight:lighter"> {{ Time }}</a>
        </div>

        <div class="id" style="text-align:center;color:#000;font-weight:bolder;margin-top:-45px">ID: {{ cardId }}</div>

        <div class="header"
            style="border: 1px solid #fa5c7c!important; background-color: #fa5c7c!important;height:130px;border-radius:5px;margin-left:5px;margin-right:30px;margin-top:40px">

            <div class="info" style="color: #fff;font-weight:bolder">
                <div class="from" style="margin-left: 20px;line-height:100px">{{ From }}
                </div>
            </div>
            <div class="logo" style="font-size:30px;margin-top:-76px;margin-left:520px">
                <h1 class="mt-1 mb-1 text-white"><i class="mdi mdi-heart-pulse"></i></h1>
            </div>
        </div>
        <div class="to" style="float:right;margin-top:-95px;margin-right:55px;color:#fff;font-weight:bolder">
            {{ To }}
        </div>

        <div class="content"
            style="width: 60%;border:1px solid #fff;margin-left:5px;border-radius:5px;margin-top:35px;float:left;  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);">
            <div class="tite" style="font-weight: bold;color:#6E757C;font-size:15px;margin-left:25px;margin-top:20px">
                表白内容
            </div>
            <div class="body" style="font-size: 12px;color:#9BA6AC;margin-left:25px;margin-top:20px;padding-right:20px">
                {{ Body }}
            </div>
            <div class="pic" v-if="Pic"><img :src="Pic" style="width: 200px;margin-left:20px"></div>
            <div class="line" style="border-top: 1px solid #E4EAEE;margin-left:25px;margin-right:20px;margin-top:20px">
            </div>

            <div class="like" style="margin-left: 570px;margin-top:30px;padding-bottom:30px">
                <div class="svg" style="display: flex;align-items: center;">
                    <label class="swap">
                        <!-- this hidden checkbox controls the state -->
                        <input type="checkbox" v-model="flag" />
                        <!-- volume on icon -->
                        <svg t="1686121040076" class="icon swap-on fill-current" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2450" width="20" height="20" @click="unlike"
                            v-if="flag">
                            <path
                                d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z"
                                fill="#d81e06" p-id="2451"></path>
                        </svg>

                        <!-- volume off icon -->
                        <svg t="1686121040076" class="icon swap-off fill-current" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2450" width="20" height="20" @click='like' v-else>
                            <path
                                d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z"
                                fill="#2c2c2c" p-id="2451"></path>
                        </svg>
                    </label>
                    <a style="color: #E8677E;font-weight:bolder;font-size:12px">{{ Likes }}</a>
                </div>
            </div>
        </div>

        <div class="comment"
            style="border:1px solid #fff;width:35%;float:right;height:440px;margin-right:30px;margin-top:35px;border-radius:5px;box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); overflow-y: scroll;">
            <div class="comment" style="font-size:15px;font-weight:bold;margin-left:24px;margin-top:20px">
                评论列表
            </div>
            <div class="number" style="color: #9BA6AC;font-weight:bold;font-size:12px;margin-left:300px;margin-top:-18px">
                共{{ commentNumber }}条
            </div>
            <div class="info" style="margin-top: 40px;width:100%;padding-right:40px;margin-left:20px">

                <div class="user" style="border-bottom:1px solid #E4EAEE;" v-for="cmt in comment" :key="cmt.id">
                    <div class="title" style="font-size:15px;"> {{ cmt.From }} </div>
                    <div class="body" style="color: #98a6ad;font-size:12px">
                        {{ cmt.Info }}
                    </div>
                    <div class="time" style="color: #98a6ad;font-size:12px;padding-bottom:10px">
                        {{ cmt.Time }}
                    </div>
                </div>

            </div>
        </div>

        <div class="chat"
            style="width: 60%;float:left;border:1px solid #fff;margin-left:5px;;border-radius:5px;box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);margin-top:20px;height:200px">
            <div class="title" style="font-weight: bolder;margin-left:25px;margin-top:10px">评论</div>
            <div class="input" style="margin-top: 70px;margin-left:-250px">
                <input type="text" placeholder="评论的内容" class="input input-bordered input-success w-full max-w-xs"
                    width="1500px" v-model="input" />
                <button class="btn btn-neutral" @click="publish">发送评论</button>
            </div>
        </div>
    </div>
</template>

<script>
import { getCardDetails, likeCard, unlikeCard, getCardComments, publishComment } from '../utils/LoveOnChain'
export default {
    name: "card",
    data() {
        return {
            input: '',//代表用户输出的值
            cardId: '',
            From: '',
            To: '',
            Body: '',
            Time: '',
            Pic: '',
            Likes: 0,
            flag: false,
            sss: '',
            comment: [],
            commentNumber: ''
        };
    },
    async created() {
        console.log(this.$route.params.id);
        const result = await getCardDetails(this.$route.params.id);
        const comment = await getCardComments(this.$route.params.id);
        this.comment = comment;
        this.comment = comment.map(comment => {
            let newCard = { ...comment };
            if (newCard.From.length > 20) {
                newCard.From = newCard.From.slice(0, 6) + '...' + newCard.From.slice(-4);
            }
            newCard.Time = new Date(newCard.Time).toLocaleString('en-US', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            return newCard;
        });
        this.commentNumber = this.numberToChinese(this.comment.length);
        if (result) {
            this.cardId = result.Id;
            this.From = result.From;
            //在这里对From进行数据压缩前六后四
            this.sss = this.From.substring(0, 6) + '...' + this.From.substring(this.From.length - 4);
            this.To = result.To;
            this.Body = result.Body;
            this.Time = result.Time;
            //在这里将时间转化成2021-05-16 09:09:39格式
            this.Time = new Date(result.Time).toLocaleString('en-US', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });

            this.Pic = result.pic
            this.Likes = result.Likes;
            this.flag = result.flag;
        }
    },
    methods: {
        async like() {
            const result = await likeCard(this.cardId);
            if (result == 1) {
                //将Like转化成数字然后在基础+1
                this.Likes = parseInt(this.Likes) + 1;
            }
        },
        //取消用户点赞
        async unlike() {
            const result = await unlikeCard(this.cardId);
            if (result == 1) {
                //将Like转化成数字然后在基础-1
                this.Likes = parseInt(this.Likes) - 1;
            }
        },
        //发表评论
        async publish() {
            //调用该方法之前 判断input是否为空
            if (this.input.lenght == 0) {
                alert("评论不能为空");
                return;
            }
            const result = await publishComment(this.cardId, this.input);
            if (result == 1) {
                const comment = await getCardComments(this.$route.params.id);
                this.comment = comment;
                this.comment = comment.map(comment => {
                    let newCard = { ...comment };
                    if (newCard.From.length > 20) {
                        newCard.From = newCard.From.slice(0, 6) + '...' + newCard.From.slice(-4);
                    }
                    newCard.Time = new Date(newCard.Time).toLocaleString('en-US', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
                    return newCard;
                });
            }
            //重置input
            this.input = '';
            this.commentNumber = this.numberToChinese(this.comment.length);
        },
        numberToChinese(number) {
            const chineseNumbers = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
            const chineseUnits = ["", "十", "百", "千", "万", "亿"]; // 可根据需要扩展更大的单位

            if (number === 0) {
                return chineseNumbers[0];
            }

            let chinese = "";
            let unitIndex = 0;

            while (number > 0) {
                const digit = number % 10;
                if (digit !== 0) {
                    const digitChinese = chineseNumbers[digit];
                    const unit = chineseUnits[unitIndex];
                    chinese = digitChinese + unit + chinese;
                }
                unitIndex++;
                number = Math.floor(number / 10);
            }

            return chinese;
        }
    }
}



</script>

<style scoped>
* {
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.app {
    top: 80px;
    width: 80%;
    float: right;
    overflow-y: auto;
    height: 89vh;
}
</style>